<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
	<table id="tabl">
			

	</table>
<button>添加用户</button>
	<form id="updateUsers">
		姓名：<input type="text" name="name"><br>
		年龄：<input type="text" name="age"><br>
		性别：男<input type="radio" name="sex" value="男">女<input type="radio" name="sex" value="女"><br>
		姓名：<select name="grade">
			<option value="黄金">黄金</option>
			<option value="白银">白银</option>
			<option value="菜鸡">菜鸡</option>
			<option value="王者">王者</option>
		</select> <br>

	</form>
	<button onclick="updateOver()">确定</button>
	<script type="text/javascript">
        var curentBeFixLine = -1;
		var users = [
			{
				name:"张三",
				age:18,
				sex:"男",
				grade:"黄金"
			},
			{
				name:"李四",
				age:12,
				sex:"女",
				grade:"白银"
			},
			{
				name:"王五",
				age:22,
				sex:"男",
				grade:"菜鸡"
			},
			{
				name:"老张",
				age:58,
				sex:"男",
				grade:"王者"
			},
		];

		showTable() ;
		// 表格=“”
		// 循环我的用户数组，每一个用户代表表格的一行
		// 	表格+=行
		// 	循环每个数组元素，元素对象的每一个属性代表一列
		// 		表格+单元格
		// for 0-9
		// 	for 0-9

		//在function中声明的变量叫局部变量，声明周期尽在function中
		function showTable() {
			var str = `
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>段位</th>
				<th>编辑</th>
			</tr>
			`;
			for(var i in users){
				str+="<tr>"
				for(var j in users[i]){
					str+="<td>"+users[i][j]+"</td>"
				}
				str+=`<td>
				<a href="javascript:del(${i})">×</a> | 
				<a href="javascript:ipdate(${i})">修改</a> 
				</td>`
				str+="</tr>"
			}
			document.querySelector('#tabl').innerHTML=str;
		}

		function del(line) {
			delete users[line];
			showTable();
		}

		function ipdate(line) { /*更新表格*/
			
			var fomr = document.querySelector('#updateUsers');
		    curentBeFixLine=line;
			for(var i in  users[line]){ //sex
				fomr[i].value = users[line][i];
				// document.forms[0].sex.value=男
			}
		}

		function updateOver(){
//            修改的是第几行
//            alert(curentBeFixLine);
            var fomr = document.querySelector('#updateUsers');
            for(var i in  users[curentBeFixLine]){ //sex
				  users[curentBeFixLine][i]=fomr[i].value;
			}
            showTable();
		}
	</script>
</body>
</html>